//在 node.js下获取 获取路径
const path = require('path');
//引用本地 webpack 功能
const webpack = require('webpack');
//引用clean-webpack-plugin 打包前先清除dist文件夹
const CleanWebpackPlugin = require('clean-webpack-plugin');
//引用html-webpack-plugin 生成新的HTML模板
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引用extract-text-webpack-plugin 把 CSS 分离成文件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

//angular库自身依赖
const AngularJs = ['angular',
  'angular-animate',
  'angular-local-storage',
  './src/js/angular/angular-logger.js',
  'angular-ui-router',
  'angular-translate',
  'angular-resource',
  './src/js/angular/angular-clipboard.js'
]

//插件库Plugin
const PluginModule = [
  'angular-chart.js',
  './src/js/module/oclazyload/ocLazyLoad.js',
  './src/js/module/bootstrap/ui-bootstrap-tpls.js',
  './src/js/module/bootstrap/bootstrap-colorpicker-module.js',
  './src/js/module/uigrid/ui-grid.js',
  './src/js/module/hotkeys/mousetrap.js',
  './src/js/module/hotkeys/hotkeys.js',
  './src/js/module/file/FileSaver.js',
  './src/js/module/file/angular-file-upload.js',
  './src/js/module/contextmenu/context-menu.js',
  './src/js/module/pti/fs-logger.js',
  './src/js/module/pti/fs-storage.js',
  './src/js/module/pti/fs-router.js',
  './src/js/module/pti/fs-validator.js',
  './src/js/module/pti/fs-layout.js',
  './src/js/module/pti/fs-menu.js',
  './src/js/module/pti/fs-modal.js'
]

//自身依赖Common
const CommonModule = [
  './src/js/waf.js',
  './src/js/wafConfig.js',
  './src/js/wafMain.js',
  './src/js/common/service/httpInterceptor.js',
  './src/js/common/service/i18nLoader.js',
  './src/js/common/service/ajaxServiceFactory.js',
  './src/js/common/service/signonService.js',
  './src/js/common/service/gridService.js',
  './src/js/common/service/formatService.js',
  './src/js/common/service/arithService.js',
  './src/js/common/service/big.js',
  './src/js/common/service/dateService.js',
  './src/js/common/service/keyDownService.js',
  './src/js/common/service/commonService.js',
  './src/js/common/filter/fs-filter.js',
  './src/js/common/directive/formater.js',
  './src/js/common/directive/authorization.js',
  './src/js/common/router/routerConfig.js',
  './src/js/common/router/pageRouter.js',
  './src/js/common/router/lookupRouter.js',
  './src/js/common/router/popupRouter.js'
]

//css合并
const Style = [
  './src/css/waf.css',
  './src/css/DEFAULT/app.css',
  './src/css/animate.css',
  './src/css/colorpicker.css',
  './src/js/module/hotkeys/hotkeys.css',
  './src/js/module/uigrid/ui-grid.css'
]

module.exports = {
  entry: {
    "AngularJs": AngularJs,
    "PluginModule": PluginModule,
    "CommonModule": CommonModule,
    "index": './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    //[name]对应的是 entry中的"app.bundle"
    filename: '[name].js'
  },
  module: {
    rules: [{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      { //打包样式中背景图
        test: /\.(gif|png|jpg)$/,
        loader: "url-loader?limit=8192&name=images/[hash:8].[name].[ext]",
        options: {
          publicPath: './images'
        }
        //limit参数，代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录
        //name后面是打包后的路径；
        //loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用
        //上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
      },
      {
        // test: /\.(gif|png|jpe?g|svg)$/,
        test: /\.(svg)$/,
        use: [{
            loader: 'file-loader',
            options: {
              name: '[name].[ext]?[hash]',
              outputPath: 'img/'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              bypassOnDebug: true,
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: [{
          loader: 'html-loader',
          options: {
            minimize: false
          }
        }],
      },
      {
        test: /\.(woff2?|svg)$/,
        loader: 'url-loader?limit=10000'
      },
      // 字体文件都放到 fonts 目录中
      {
        test: /\.(woff2?|svg)$/,
        loader: 'url-loader?limit=10000&name=[name].[ext]&outputPath=fonts/'
      },
      {
        test: /\.(ttf|eot)$/,
        loader: 'file-loader?name=[name].[ext]&outputPath=fonts/'
      },
    ]
  },
  plugins: [
    //打包前先将dist文件夹清空
    new CleanWebpackPlugin(['dist']),
    new ExtractTextPlugin('css/index.css'),
    // new ExtractTextPlugin({
    //   filename: '[name].css',
    //   // disable: !isProd, //是否使用该插件
    //   // publicPath: 'css/' // css 文件放到 css 目录中
    // }),
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor',
    //   filename: 'vendor.bundle.js'
    // }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // filename: 'indexxxxx.html', //可以对文件重命名
      minify: {
        collapseWhitespace: false, //是否压缩
      },
      hash: false, //是否添加 哈希 值
    }),
    // HMR 模块热替换
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
  //配置 webpack-dev-server 工作选项
  devServer: {
    port: 9680,
    open: false,
    hot: true
  },
  //使用 source-map 工具 可以定位错误代码
  devtool: 'source-map'
}